<template>
<div class='outputcheck'>
<div class="box">
  <el-table
     :data="tableData"
      style="width:100%"

    max-height="500">

    <el-table-column
      prop="id"
      label="序号"
      width="180"
     >
    </el-table-column>
    <el-table-column
      prop="goodsId"
      label="货物编号"
      width="180"
     >
    </el-table-column>
    <el-table-column
      prop="outGoodsNumber"
      label="数量"
      width="180"
      >
      </el-table-column>
       <el-table-column
      prop="deliveryTime"
      label="出库日期"
      width="220"
      >
      </el-table-column>
       <el-table-column
      prop="outUserId"
      label="出库员id"
      width="180"
     >
      </el-table-column>
      <el-table-column
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="check(scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
   <el-dialog title="核验入库信息" :visible.sync="dialogFormVisible" >
           <el-form :model="goods">
               <el-col :span="12">
             <el-form-item label="货物名称：" :label-width="formLabelWidth">
                <el-input v-model="goods.name" autocomplete="off" value="text" disabled="disabled"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="货物种类：" :label-width="formLabelWidth">
                 <el-input  v-model="goods.category" disabled="disabled" ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
               <el-form-item label="货物数量：" :label-width="formLabelWidth">
               <el-input v-model="goods.number" autocomplete="off"  value="number" disabled="disabled"></el-input>
            </el-form-item>
               </el-col>
                <el-col :span="12">
               <el-form-item  @click.native="Time"  label="出库时间：" :label-width="formLabelWidth">
                          <el-input v-model ="goods.warehouseEntryTime"  disabled="disabled"></el-input>
                    </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="客户ID：" :label-width="formLabelWidth">
                 <el-input v-model="goods.customerId" autocomplete="off"  value="number" disabled="disabled"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="截止时间：" :label-width="formLabelWidth">
                   <el-input  v-model ="goods.deadlineTime" autocomplete="off"  value="number" disabled="disabled"></el-input>
              </el-form-item>
              </el-col>
               <el-col :span=12>
                    <el-form-item label="库区：" style="margin-left:70px">
                      <el-input  v-model="goods.locationId" disabled="disabled" style="width:200px"></el-input>
                    </el-form-item>
                </el-col>
              <el-col :span="12">
              <el-form-item label="出库员: " :label-width="formLabelWidth" >
                    <el-input  v-model="goods.inuserName" disabled="disabled"></el-input>
               </el-form-item>
              </el-col>
                 <el-col :span="12">
                <el-form-item label="出库核验员: " @click.native="user" :label-width="formLabelWidth" >
                    <el-input  v-model="outCheckUserName" disabled="disabled"></el-input>
               </el-form-item>
                 </el-col>
      </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="submit(goods)">确 定</el-button>
           </div>
           </el-dialog>
   <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
           <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.page.currentPage"
        :page-sizes="[10, 20, 30, 40,50]"
        :page-size="this.page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.page.total"
      >
      </el-pagination>
        </div>
</div>
</div>
</template>
<script>
import axios from '../../../axios'
export default {
  data () {
    return {
      userName: localStorage.currentUser_name,
      page: {
        // 当前页码
        currentPage: 1,
        // 每页条数
        pageSize: 10,
        // 数据总条数
        total: ''
      },
      goods: [],

      goodsId: '',
      id: '',
      tableData: [
      ],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      outCheckUserName: ''
    }
  },
  methods: {
    check (row) {
      this.dialogFormVisible = !this.dialogFormVisible
      console.log(row)
      this.goodsId = row.goodsId,
      console.log(this.goodsId)
      this.id = row.id
      axios({
        url: '/dp/queryOutGoodsById',
        method: 'GET',
        params: {
          goodsId: this.goodsId
        }
      }).then(res => {
        console.log(res)
        this.goods = res.data.data
      })
    },
    submit () {
      this.dialogVisible = !this.dialogVisible,
      console.log(this.goodsId)
      console.log(this.id)
      axios({
        url: '/dp/out-check/check',
        method: 'get',
        params: {
          checkId: this.id
        }
      }).then(res => {
        console.log(res)
      })
    },
    user () {
      this.outCheckUserName = this.userName
      console.log(this.outCheckUserName)
      return this.outCheckUserName
    },
    // 条数选择
    // 条数选择
    handleSizeChange (val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      axios({
        url: '/dp/out-goods/query',
        method: 'get',
        // 上传page参数,让后端进行分页
        params: {
          pageSize: this.page.pageSize
        }
      }).then(res => {
        // 拿到后端分页数据
        this.tableData = res.data.data.records
        // 拿到后端数据总条数
        this.page.total = parseInt(res.data.data.total)
      }).catch(err => {
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    },

    handleCurrentChange (val) {
      this.page.currentPage = val
      console.log(`当前页: ${val}`)

      axios({
        url: '/dp/out-goods/query',
        method: 'get',
        // 需要想办法传入page对象
        params: {
          pageSize: this.page.pageSize
        }
      }).then(res => {
        console.log('66666')
        this.tableData = res.data.data.records
        console.log('66666')
        console.log(this.tableData)
      }).catch(err => {
        this.$alert(err.response.data.msg, '请联系管理员', {
          confirmButtonText: '确定',
          callback: action => {

          }
        })
      })
    }
  },
  created () {
    // 页面刷新时重置搜索框和按键状态
    console.log(this.page)
    axios({
      url: '/dp/out-goods/query',
      method: 'get',
      // 需要想办法传入page对象
      params: {
        currentPage: this.page.currentPage,
        pageSize: this.page.pageSize
      }
    }).then(res => {
      console.log(res)
      this.tableData = res.data.data.records
      console.log(this.tableData)
      this.page.total = parseInt(res.data.data.total)
      console.log(this.page.total)
    }).catch(err => {
      console.log(err.response)
      this.$alert(err.response.data.msg, '请联系管理员', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    })
  }
}
</script>
<style lang='less' scoped>
/deep/.cell
{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}

.outputcheck{
   width: 1200px;
    margin: 0 auto;
    display: flex;
    position: relative;
    height: 630px;
.box{

  width: 1120px;
  height: 350px;
  margin: 50px 100px ;
  /deep/.block{
     .el-pagination{
  .el-pagination__total{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
.el-pager
.number{
  font-weight: bold;
  font-size: 20px;

}
.el-pagination__jump{
  font-weight: bold;
  font-size: 20px;
  color:rgb(61, 59, 59);
}
.el-input__inner{
  font-weight: bold;
  font-size: 20px;
  color: rgb(61, 59, 59);
}
  }
  }
}
}
</style>
